"use client";

import { MainContext } from "@/src/providers/MainProvider";
import { MacroAction } from "@/src/types/types";
import {
  Button,
  Flex,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  NumberInput,
  NumberInputField,
} from "@chakra-ui/react";
import { useContext, useState } from "react";

function MacroActionList({
  list,
  onChange,
}: {
  list: MacroAction[];
  onChange: Function;
}) {
  const [selected, setSelected] = useState(-1);

  const addAction = (type: string) => {
    if (type == "mouse") {
      onChange([
        ...list,
        {
          key: "0",
          code: "mouse",
          type: "mouse",
          action: "mousedown",
          time: 0,
          delay: 10,
        },
        {
          key: "0",
          code: "mouse",
          type: "mouse",
          action: "mouseup",
          time: 0,
          delay: 10,
        },
      ]);
    } else {
      onChange([
        ...list,
        {
          key: "A",
          code: "KeyA",
          type: "key",
          action: "keydown",
          time: 0,
          delay: 10,
        },
        {
          key: "A",
          code: "KeyA",
          type: "key",
          action: "keyup",
          time: 0,
          delay: 10,
        },
      ]);
    }
  };

  const delAction = () => {
    if (list.length == 0) {
      return;
    }
    list.splice(selected, 1);
    onChange([...list]);
    setSelected(-1);
  };

  const moveUp = () => {
    if (list.length == 0) {
      return;
    }
    if (selected != 0) {
      const downAction = list[selected - 1];
      const upAction = list[selected];
      const headAction = list.slice(0, selected - 1);
      const tailAction = list.slice(selected + 1);

      onChange([...headAction, upAction, downAction, ...tailAction]);
      setSelected(selected - 1);
    }
  };
  const moveDown = () => {
    if (list.length == 0) {
      return;
    }
    if (selected != list.length - 1) {
      const downAction = list[selected];
      const upAction = list[selected + 1];
      const headAction = list.slice(0, selected);
      const tailAction = list.slice(selected + 2);
      onChange([...headAction, upAction, downAction, ...tailAction]);
      setSelected(selected + 1);
    }
  };
  const moveTop = () => {
    if (list.length == 0) {
      return;
    }
    if (selected != 0) {
      const selectAction = list.splice(selected, 1)[0];
      onChange([selectAction, ...list]);
      setSelected(0);
    }
  };
  const moveBottom = () => {
    if (list.length == 0) {
      return;
    }
    if (selected != list.length - 1) {
      const selectAction = list.splice(selected, 1)[0];
      onChange([...list, selectAction]);
      setSelected(list.length);
    }
  };

  const changeDelay = (value: number, select: number) => {
    onChange((list: MacroAction[]) => {
      return list.map((action, index) =>
        index == select ? { ...action, delay: value } : action
      );
    });
  };
  const { t } = useContext(MainContext);

  return (
    <div className="p-0 macro-action-list">
      <ul className="min-h-[405px] panel-main-fg max-h-[600px] overflow-y-auto">
        <li className=" py-1">
          <div>{t("531")}</div>
          <div>{t("532")}</div>
          <div>{t("533")}</div>
          <div>{t("534")}</div>
        </li>
        {list.map((action, index) => (
          <li
            className=""
            key={index}
            onClick={() => {
              setSelected(index);
            }}
            data-selected={index == selected}
            onContextMenu={() => {}}
          >
            <div className="text-sm text-center">{action.name}</div>
            <div>{action.action == 1 ? t("525") : t("526")}</div>
            <div>
              <NumberInput
                className="!border-none"
                value={action.delay}
                onClick={(event) => {
                  const t = event.target as HTMLInputElement;
                  t.select();
                }}
                onBlur={(evt) => {}}
                onChange={(s, n) => {
                  changeDelay(n, index);
                }}
              >
                <NumberInputField
                  border={"none"}
                  padding={0}
                  textAlign={"right"}
                />
              </NumberInput>
            </div>
            <div className="h-5">
              <Menu>
                <MenuButton>
                  <svg
                    className="h-5"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="25981"
                    width="32"
                    height="32"
                  >
                    <path
                      d="M512 128c-46.933333 0-85.333333 38.4-85.333333 85.333333s38.4 85.333333 85.333333 85.333334 85.333333-38.4 85.333333-85.333334-38.4-85.333333-85.333333-85.333333z m0 597.333333c-46.933333 0-85.333333 38.4-85.333333 85.333334s38.4 85.333333 85.333333 85.333333 85.333333-38.4 85.333333-85.333333-38.4-85.333333-85.333333-85.333334z m0-298.666666c-46.933333 0-85.333333 38.4-85.333333 85.333333s38.4 85.333333 85.333333 85.333333 85.333333-38.4 85.333333-85.333333-38.4-85.333333-85.333333-85.333333z"
                      p-id="25982"
                      fill="#e6e6e6"
                    ></path>
                  </svg>
                </MenuButton>
                <MenuList
                  p={0}
                  color={"gray"}
                  overflow={"hidden"}
                  fontSize={".85rem"}
                  minW={"3.5rem"}
                  textAlign={"center"}
                  borderRadius={"2px"}
                >
                  <MenuItem onClick={() => moveTop()}>{t("535")}</MenuItem>
                  <MenuItem onClick={() => moveUp()}>{t("536")}</MenuItem>
                  <MenuItem onClick={() => moveDown()}>{t("537")}</MenuItem>
                  <MenuItem onClick={() => moveBottom()}>{t("538")}</MenuItem>
                </MenuList>
              </Menu>
            </div>
          </li>
        ))}
      </ul>
      <Flex
        flexDirection={"row-reverse"}
        w="100%"
        gap={".5rem"}
        className="py-2"
      >
        <Button
          className="main-btn !px-6 w-20 !text-white"
          onClick={() => delAction()}
        >
          {t("505")}
        </Button>
      </Flex>
    </div>
  );
}

export default MacroActionList;
